<template>
  <div class="dashboard-container">
    <!-- 统计面板子组件 -->
    <panel-group
      :user-total="userTotal"
      :article-total="articleTotal"
      :comment-total="commentTotal"
      :patron-total="patronTotal"
      :sponsor-total="sponsorTotal"
      :loop-total="loopTotal"
      :report-total="reportTotal"
      :notice-total="noticeTotal"
    />
    <el-row :gutter="40">
      <el-col :xs="24" :sm="24" :lg="12">
        <el-card>
          <!-- 饼状图：各分类文章统计 -->
          <!-- echarts 在初始化实例的时候就要拿到数据，有数据就会展示出来，这里用 v-if="flag" 来控制获取到数据后再渲染图表;
           为了满足图表数据所需的格式，这里用对象点属性的方式传值，否则报错 -->
          <pie-chart v-if="flag" :series-data="categoryTotal.nameAndValueList" :legend-data="categoryTotal.nameList"/>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <el-card>
          <!-- 柱状图：近6个月发布的文章统计-->
          <!-- echarts 在初始化实例的时候就要拿到数据，有数据就会展示出来，这里用 v-if="flag" 来控制获取到数据后再渲染图表;
               为了满足图表数据所需的格式，这里用对象点属性的方式传值，否则报错 -->
          <bar-chart
            v-if="flag"
            :x-axis-data="monthArticleTotal.yearMonthList"
            :series-data="monthArticleTotal.articleTotalList"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import PieChart from './components/PieChart' // 饼状图
import BarChart from './components/BarChart' // 柱状图
import PanelGroup from './components/PanelGroup' // 统计子组件
import api from '@/api/home'

export default {
  name: 'Dashboard',
  components: {
    PieChart,
    BarChart,
    PanelGroup
  },
  data() {
    return {
      userTotal: 0, // 总用户数
      articleTotal: 0, // 总文章数
      commentTotal: 0, // 总评论数
      patronTotal: 0, // 赞助1元总记录数
      sponsorTotal: 0, // VIP 赞助总记录数
      loopTotal: 0, // 投图赞助总记录数
      reportTotal: 0, // 举报总记录数
      noticeTotal: 0, // 系统通知总数
      // 图表数据
      flag: false, // 用来判断是否显示图表组件
      categoryTotal: {}, // 饼图（每个分类下的文章总数）
      monthArticleTotal: {} // 柱状图（近6个月发布文章总数）
    }
  },
  mounted() {
    // 查询面板中相关的总记录数
    this.getTotal()
    // 统计各技术频道文章数和近6个月发布文章数
    this.getArticleTotal()
  },
  methods: {
    // 一、获取各项统计数据
    async getTotal() {
      // 1、统计用户总数
      const { data: userTotal } = await api.getUserTotal()
      this.userTotal = userTotal.userTotal
      // 2、统计文章总数
      const { data: articleTotal } = await api.getArticleTotal()
      this.articleTotal = articleTotal.articleTotal
      // 3、统计留言回复总数
      const { data: commentTotal } = await api.getCommentTotal()
      this.commentTotal = commentTotal.commentTotal
      // 4、统计赞助1元总记录数
      const { data: patronTotal } = await api.getPatronTotal()
      this.patronTotal = patronTotal.patronTotal
      // 5、统计VIP赞助人总记录数
      const { data: sponsorTotal } = await api.getSponsorTotal()
      this.sponsorTotal = sponsorTotal.sponsorTotal
      // 6、统计投图赞助总记录数
      const { data: loopTotal } = await api.getLooperTotal()
      this.loopTotal = loopTotal.loopTotal
      // 7、统计举报总记录数
      const { data: reportTotal } = await api.getReportTotal()
      this.reportTotal = reportTotal.reportTotal
      // 8、统计系统通知总记录数
      const { data: noticeTotal } = await api.getNoticeTotal()
      this.noticeTotal = noticeTotal.noticeTotal
    },
    // 二、统计各技术频道文章数/和近6个月发布文章数
    async getArticleTotal() {
      // 1、饼状图（统计各技术频道文章数）
      const { data: categoryTotal } = await api.getCategoryTotal()
      this.categoryTotal = categoryTotal
      // 2、柱状图（统计近6个月发布文章数）
      const { data } = await api.getMonthArticleTotal()
      this.monthArticleTotal = data
      // 获取数据完成，再加载图表组件，将数据渲染
      this.flag = true
    }
  }
}
</script>
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
